<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片拖动jquery</title>
    <script src="/jquery/jquery.min.js"></script>
    <style>
        * { margin:0; padding:0; }
        div { width:600px; height:400px; background:#FFF; border:1px solid slateblue; position:relative; overflow:hidden; margin:20px auto; }
        img { position:absolute; left:0; top:0; transform:scale(1); }
        img:active { cursor:move; }
        ::-webkit-scrollbar { width:6px; height:6px; background-color:#F5F5F5; }
        ::-webkit-scrollbar-thumb { background-color:#3d4a5dd9; }
        ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); background-color:#F5F5F5; }
    </style>
</head>
<body>
<div class="dragImage"></div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        class DRAGIMAGE {
            constructor(dom, img, zoomMax = 4, zoomMin = 0.2) {
                // 初始化变量
                this.dom = dom; // 父元素
                this.dom.innerHTML = `<img src="${img}" draggable="false" />`; // 在父元素内插入图片
                this.img = this.dom.querySelector("img"); // 获取图片元素

                // 初始化鼠标起始坐标和图片移动距离
                this.start_x = 0;
                this.start_y = 0;
                this.move_left = 0;
                this.move_top = 0;
                this.img_left = 0;
                this.img_top = 0;

                // 获取父元素的宽高
                this.dom_width = this.dom.offsetWidth;
                this.dom_height = this.dom.offsetHeight;

                // 缩放相关变量
                this.zoom = 100; // 初始缩放比例
                this.zoom_Max = zoomMax * 100; // 最大缩放比例
                this.zoom_Min = zoomMin * 100; // 最小缩放比例

                // 图片加载后获取其实际宽高并进行初始缩放
                var image = new Image();
                image.src = img;
                image.onload = () => {
                    this.img_width = image.width;
                    this.img_height = image.height;
                    this.scaleImg(this.img_width, this.img_height);
                };

                // 绑定鼠标按下和滚轮事件
                this.mouseDown();
                this.mouseWheel();
            }

            // 鼠标按下事件处理
            mouseDown() {
                this.img.addEventListener("mousedown", e => {
                    // 获取鼠标点击时的坐标
                    this.start_x = e.clientX;
                    this.start_y = e.clientY;
                    this.mouseMove();
                    e.preventDefault();
                });
            }

            // 处理鼠标移动
            mouseMove() {
                let moveHandler = e => {
                    // 计算新的图片位置
                    this.move_left = this.img_left + (e.clientX - this.start_x);
                    this.move_top = this.img_top + (e.clientY - this.start_y);
                    this.setPosition();
                    e.preventDefault();
                };

                // 绑定鼠标移动事件
                this.dom.addEventListener("mousemove", moveHandler);

                // 鼠标释放或离开容器时的处理
                let endMove = () => {
                    this.dom.removeEventListener("mousemove", moveHandler);
                    this.img_left = this.move_left;
                    this.img_top = this.move_top;
                };

                this.dom.addEventListener("mouseup", endMove);
                this.dom.addEventListener("mouseleave", endMove);
            }

            // 处理鼠标滚轮事件用于缩放图片
            mouseWheel() {
                this.dom.addEventListener("mousewheel", e => {
                    let delta = e.wheelDelta || -e.detail;
                    // 根据滚轮方向调整缩放比例
                    this.zoom += (delta > 0 ? 1 : -1) * 10; // 调整缩放速度
                    // 限制缩放比例在最大和最小值之间
                    this.zoom = Math.min(Math.max(this.zoom, this.zoom_Min), this.zoom_Max);
                    // 计算新的宽高并应用
                    let width = this.img_width * (this.zoom / 100);
                    let height = this.img_height * (this.zoom / 100);
                    this.scaleImg(width, height);
                    e.preventDefault();
                });
            }

            // 缩放图片
            scaleImg(width, height) {
                this.img.style.width = width + 'px';
                this.img.style.height = height + 'px';
            }

            // 设置图片位置
            setPosition() {
                this.img.style.left = this.move_left + 'px';
                this.img.style.top = this.move_top + 'px';
            }
        }

        // 初始化 DRAGIMAGE 类并传入参数
        let dragImageEl = document.querySelector('.dragImage');
        new DRAGIMAGE(dragImageEl, "https://webstatic.mihoyo.com/upload/op-public/2023/05/30/ac698e2d5ea0f66317d189d7697a5d04_1233201386636480873.png");
    });




</script>
</body>
</html>
